<template>
	<view >
		<view class="integral-list flex flex-wrap">
			<view 
				class="integral-li mar-t20" 
				v-for="(item, index) in 10" 
				:key="index"
				@click="$goRouter('/pages/my/pages/productDetail')"
			>
				<view class="w-342">
					<u--image
						:showLoading="true" 
						src="" 
						width="342rpx" 
						height="260rpx"
						radius="4rpx"
					></u--image>
				</view>
				<view class="integral-tit mar-t14">
					瓷肌美白通透亮肤护理套装
				</view>
				<view class="integral-price flex-a ju-bt mar-t14">
					<view class="">
						<text class="price-txt mar-r10">299积分</text>
						<text class="describe-txt txt-del">¥98</text>
					</view>
					<view 
						class="price-btn flex-center padlr16"
						:class="{'price-btn2': index >= 2}"
					>
						<text v-if="index < 2">去兑换</text>
						<text v-else>积分不足</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "", // 积分产品列表
		data() {
			return {
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.integral-list {
		.integral-li {
			.price-btn {
				height: 40rpx;
				background: #FF7171;
				border-radius: 6rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.price-btn2 {
				background: #CACACA;
				color: #FFFFFF;
			}
			.integral-price {
				.price-txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #111111;
				}
			}
			.integral-tit {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
			}
			width: calc(50% - 9rpx);
			&:nth-child(odd){
				margin-right: 9rpx;
			} //奇数行
			
			&:nth-child(even){
				margin-left: 9rpx;
			}
		}
		
	}
</style>